<template>
    <div style="background-color: #eeeeee;width: 87vw;height: 85vh">
        <div style="display: flex;flex-direction: row;width: 87vw;margin-top: 20px;height: 30vh;">

    <Row style="background:white;padding:20px;width: 50vw;height: 200px;margin-right: 20px;border-radius: 10px">
        <Col span="11" >
            <Card :bordered="false" style="width: 250px;background-color: #edf4ff">
                <template #title><strong>后端设计</strong></template>
                <p>进度</p>
                <Space direction="vertical" type="flex">
                    <Progress :percent="45" status="active" />
                </Space>
                <AvatarList :list="data.list" />
            </Card>
        </Col>
        <Col span="11" offset="2" style="left: -20px">
            <Card :bordered="false" style="width: 250px; background-color: #edf4ff;margin-left: 10px">
                <template #title><strong>前端设计</strong></template>
                <p>进度</p>
                <Space direction="vertical" type="flex">
                    <Progress :percent="60" status="active" stroke-color="orange"/>
                </Space>
                <AvatarList :list="data.list" />
            </Card>
        </Col>

    </Row>
            <div style="width: 15vw;height: 200px;background-color: #d5eef6;border-radius: 10px;margin-right:20px;">
                <Space wrap style="width: 15vw;height: 150px;">
                    <Circle :percent="percent" :stroke-color="color" style="margin-left: 35px;margin-top: 20px">
                        <Icon v-if="percent === 100" type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
                        <span v-else style="font-size:24px">{{ percent }}%</span>
                    </Circle>
<!--                    <ButtonGroup size="large">-->
<!--                        <Button icon="ios-add" @click="add"></Button>-->
<!--                        <Button icon="ios-remove" @click="minus"></Button>-->
<!--                    </ButtonGroup>-->
                </Space>
                <span style="height:50px;margin-left: 60px;"><strong >项目总进度</strong></span>

            </div>

    <Row style="width:25vw ;height: 200px;background-color: paleturquoise;border-radius: 10px;">
        <Col span="12" style="top:50px">
            <NumberInfo sub-title="近7日活跃设备" total="12,321" sub-total="17.1" status="up"/>
        </Col>
        <Col span="12" style="top:50px">
            <NumberInfo sub-title="近30日活跃设备" total="50,193" sub-total="5.3" status="down" />
        </Col>
    </Row>
        </div>

        <div style="width: 87vw;display: flex;flex-direction: row;margin-top: 15px;height:47vh;background-color: white;margin-right: 20px">

        </div>
        <div style="bottom:0;display: flex; flex-direction: column;height: 9vh;width: 87vw;background-color: #5885a8;margin-top: 6px;">
        <div style="text-align: center;display: flex;flex-direction: row;justify-content: center;align-content: center ;padding: 5px">
            <span style="padding-right: 5px">帮助</span>
            <Icon style="font-size: 20px;padding-right:5px " type="logo-tux" />
            <span style="padding-right: 5px">条款</span>

        </div>
            <div style="text-align: center">Useright © 2024 View Design All Rights Reserved'</div>
        </div>

    </div>

    </template>






<script setup>
import {
    AvatarList,
    Card,
    Circle,
    Icon,
    NumberInfo,
    Row,
    Space,

} from "view-ui-plus";
import {computed, reactive, ref} from "vue";


// const value = ref(0)
const percent = ref(20)
const color =  computed(() => {
    let color = '#2db7f5';
    if (percent.value === 100) {
        color = '#5cb85c';
    }
    return color;
})
const data = reactive({
    list: [
        {
            src: 'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
            tip: '史蒂夫·乔布斯'
        },
        {
            src: 'https://dev-file.iviewui.com/zhj85zgAfEjChCNIKT1LQENUIOyOYCaX/avatar',
            tip: '斯蒂夫·沃兹尼亚克'
        },
        {
            src: 'https://dev-file.iviewui.com/TkH54UozsINlex15TAMI00GElsfsKSiC/avatar',
            tip: '乔纳森·伊夫'
        }

    ],

})




</script>
